<breadcrumb></breadcrumb>

<mat-card>
  <section>
    <h2>Checkbox without label</h2>
    <mat-checkbox aria-label="A single checkbox with no label example"></mat-checkbox>
  </section>
  <section>
    <h2>Standalone checkbox</h2>
    <div>
      <mat-checkbox>Yes, I agree to the terms and conditions</mat-checkbox>
    </div>
    <div>
      <mat-checkbox [disabled]="true">No, I do not agree to the terms and conditions</mat-checkbox>
    </div>
    <div>
      <mat-checkbox [indeterminate]="true">A partially done task</mat-checkbox>
    </div>
  </section>

  <section>
    <h2>Nested checklist</h2>
    <div *ngFor="let task of tasks">
      <mat-checkbox [(ngModel)]="task.completed"
                    [checked]="allComplete(task)"
                    [indeterminate]="someComplete(task.subtasks)"
                    (change)="setAllCompleted(task.subtasks, $event.checked)">
        {{task.name}}
      </mat-checkbox>
      <div class="demo-sub-list">
        <div *ngFor="let subtask of task.subtasks">
          <mat-checkbox [(ngModel)]="subtask.completed">
            {{subtask.name}}
          </mat-checkbox>
        </div>
      </div>
    </div>
  </section>

  <section>
    <h2>Colored checkboxes</h2>
    <mat-checkbox color="primary">Primary</mat-checkbox>
    <mat-checkbox color="accent">Accent</mat-checkbox>
    <mat-checkbox color="warn">Warn</mat-checkbox>
  </section>
</mat-card>